﻿import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Pane {
    property int tabId: 0

    id: home
    padding: 0
    background: Rectangle
    {
        color:"#444444"
    }

    onTabIdChanged: {
        videoPane.nSelGrid = 0
    }

    RowLayout {
        spacing: 0
        anchors.fill: parent

        Pane {
            id: leftNav
            padding: 0
            Layout.minimumWidth: 90
            Layout.fillHeight:true

            background: Rectangle
            {
                color:"#292f38"
            }



            ColumnLayout {
                spacing: 0
                anchors.fill: parent

                IconTextBtn {
                    id: tab1
                    strText: "视频监控"
                    icon: "\uf030"
                    bHighlighted: 0 == home.tabId
                    Layout.fillWidth: true
                    Layout.minimumHeight: 70
                    onClicked: {
                        home.tabId = 0;
                    }
                }

                IconTextBtn {
                    id: tab2
                    strText: "地图监控"
                    icon: "\uf03e"
                    bHighlighted: 1 == home.tabId
                    Layout.fillWidth: true
                    Layout.minimumHeight: 70

                    onClicked: {
                        home.tabId = 1;
                    }
                }

                IconTextBtn {
                    id: tab3
                    strText: "设备监控"
                    icon: "\uf247"
                    bHighlighted: 2 == home.tabId
                    Layout.fillWidth: true
                    Layout.minimumHeight: 70
                    onClicked: {
                        home.tabId = 2;
                    }
                }

                Label {
                    Layout.fillHeight: true
                }
            }

            function activeText() {
                switch(home.tabId)
                {
                case 0:
                    return tab1.strText;
                case 1:
                    return tab2.strText;
                case 2:
                    return tab3.strText;
                }

            }
        }

        GridLayout {
            property int nSelGrid: 0

            id: videoPane
            Layout.fillWidth: true
            Layout.margins: 1

            rowSpacing: 1
            columnSpacing: 1
            columns: 0 === home.tabId ? 2 : 3

            Repeater {
                model: 0 === home.tabId ? 4 : (1 === home.tabId ? 9 : 6)
                Rectangle {               // 显示区域
                    color: "#000"
                    focus: true
                    border.color: "#0093fa"
                    border.width: index === videoPane.nSelGrid ? 1 : 0
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.columnSpan: 2 === home.tabId ? (0 == index ? 2 : 1) : 1
                    Layout.rowSpan: 2 === home.tabId ? (0 == index ? 2 : 1) : 1

                    Text {
                        anchors.fill: parent
                        color: "#f1f1f1"
                        horizontalAlignment: Label.AlignHCenter
                        verticalAlignment: Label.AlignVCenter
                        font.pixelSize: height * 0.1
                        text: leftNav.activeText()
                    }

                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            videoPane.nSelGrid = index
                        }
                    }


                }
            }
        }
    }
}
